import React, {Component} from 'react';
import {Map, List} from 'immutable';
import moment from 'moment';

import {Form, Select, Modal, Row, Col, InputNumber, Input} from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;

import noop from 'util/noop';

class Refund extends Component {
    static defaultProps = {
        payAmount: 0,
        tradeOrder: Map(),
        payTypeBOList: List(),
        visible: false,

        showModal: noop,
        onOk: noop
    }

    constructor(props) {
        super(props);

        this.state = {
            confirmLoading: false
        }
    }


    render() {
        const formItemLayout1 = {
            labelCol: {span: 6},
            wrapperCol: {span: 16},
        };

        const formItemLayout2 = {
            labelCol: {span: 3},
            wrapperCol: {span: 16},
        }

        const {tradeOrder, payAmount, visible, payTypeBOList, form: {getFieldDecorator, getFieldValue}} = this.props;

        //订单编号
        const tidField = getFieldDecorator('tid', {
            initialValue: tradeOrder.get('tid')
        })(
            <Input type="hidden"/>
        );


        //退款金额
        const payAmountField = getFieldDecorator('refundAmount', {
            initialValue: payAmount,
            rules: [
                {
                    required: true, message: '请输入退款金额'
                },
                {
                    validator: this.checkPayAmount
                }
            ]
        })(
            <InputNumber max={payAmount} disabled/>
        );

        //退款备注
        const remarkField = getFieldDecorator('refundRemark')(
            <Input type="textarea" rows={4} cols={4}
                   placeholder="请输入备注内容..." maxLength={100}/>
        );

        return (
            <Modal title={`订单：${tradeOrder.get('tid')}【申请退款】`}
                   visible={visible}
                   width={800}
                   maskClosable={false}
                   onOk={this.handleOk}
                   onCancel={this.handleCancel}>
                <Form>
                    <Row>
                        <Col span="12">
                            <FormItem {...formItemLayout1}
                                      label="订单编号"><span>{tradeOrder.get('tid')}</span></FormItem>
                            <FormItem {...formItemLayout1}
                                      label="下单时间"><span>{moment(tradeOrder.get('ctime')).format('YYYY-MM-DD HH:mm:ss')}</span></FormItem>
                            <FormItem {...formItemLayout1}
                                      label="支付单号"><span>{tradeOrder.get('payOrderNo')}</span></FormItem>
                        </Col>
                        <Col span="12">
                            <FormItem {...formItemLayout1}
                                      label="订单金额"><span>&yen;{(tradeOrder.get('totalTradeCash') || 0).toFixed(2)}</span></FormItem>
                            <FormItem {...formItemLayout1}
                                      label="已支付金额"><span>&yen;{(tradeOrder.get('payTradeFee') || 0).toFixed(2)}</span></FormItem>
                            <FormItem {...formItemLayout1}
                                      label="收款人"><span>{tradeOrder.get('buyNickName')}</span></FormItem>
                        </Col>
                    </Row>


                    <FormItem {...formItemLayout2}
                              label="退款金额">
                        {payAmountField}
                        <span className="t-red">最多可退{(payAmount || 0).toFixed(2)}元(含运费{(tradeOrder.get('logisticsFee') || 0).toFixed(2)}元)</span>
                    </FormItem>

                    <FormItem {...formItemLayout2}
                              label="退款备注">
                        {remarkField}
                        <div className="t-right">{(getFieldValue('refundRemark') || '').length}/100</div>
                        </FormItem>

                    <FormItem>{tidField}</FormItem>
                </Form>
            </Modal>
        )
    }


    /**
     * 校验退款金额大于0
     * @param rule
     * @param value
     * @param callback
     */
    checkPayAmount =(rule, value, callback)=>{
        if (value <= 0) {
            callback('退款金额必须大于0');
            return ;
        }
        callback();
    }


    handleOk = (e)=>{
        const {showModal, onOk, form: {validateFields}} = this.props;
        validateFields((errors, values)=>{
            if (!errors) {
                this.setState({
                    confirmLoading: true
                });
                onOk(values).then(()=>{
                    showModal(false);
                    this.setState({
                        confirmLoading: false
                    });
                }).catch(()=>{
                    this.setState({
                        confirmLoading: false
                    });
                });
            }
        });
    }


    handleCancel = (e)=>{
        this.props.showModal(false);
    }
}

export default Form.create()(Refund);